<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/bootoast.css">
    <script src="static/js/bootstrap.js"></script>
    <script src="static/js/jquery-3.6.0.min.js"></script>
<!--    <script src="js/jquery-1.11.0.min.js"></script>-->
    <script src="js/bootoast.js"></script>

    <script>
        $(function () {
            let login = new Login();
            login.setCpacha();
            login.login();
        })

        class Login {
            constructor() {
            }
            /**
             * 设置验证码
             */
            setCpacha() {
                $("#myimg").attr("src", "/welcome/getCpacha");
                $("#myimg").click(function () {
                    this.src = this.src + "?"
                })
            }

            /**
             * 输入检查
             * @returns {boolean} true:校验通过，false:校验不通过
             */
            checkInput() {
                // 获取输入
                let username = $("#username").val();
                let password = $("#password").val();
                let vcode = $("#vcode").val();
                // 非空校验
                if (!username || username == '') {
                    bootoast({
                        message: '用户名不能为空',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!password || password == '') {
                    bootoast({
                        message: '密码不能为空',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!vcode || vcode == '') {
                    bootoast({
                        message: '验证码不能为空',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                return true;
            }
            /**
             * 登录
             */
            login() {
                let that = this
                $("#login-btn").click(function () {
                    // 输入校验
                    if (that.checkInput()) {// 校验通过
                        // 提交表单
                        $.ajax({
                            type: 'post',// 提交方式 post
                            url: $("#myForm").attr("action"),// /SelectCourse2/user/login
                            cache: false,// 不启用缓存
                            data: $("#myForm").serialize(),// 获取表单中的序列化数据，表单中的数据必须通过name=""绑定
                            dataType: 'json',// 期望服务器响应的数据类型 json
                            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                                console.log(result);
                                // 提示
                                bootoast({
                                    message: result.msg,
                                    type: 'success',
                                    position: 'top',
                                    timeout: 2
                                });
                                if (result.code == 1) {// 登录成功
                                    // 保存用户信息
                                    sessionStorage.setItem("userId", result.result.userId);
                                    sessionStorage.setItem("username", result.result.username);
                                    sessionStorage.setItem("nickName", result.result.nickName);
                                    sessionStorage.setItem("role", result.result.role);
                                    // 跳转到主界面
                                    var role = result.result.role;
                                    window.location.href = "home.html";
                                }
                            },
                            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                                // 提示
                                bootoast({
                                    message: '登录失败',
                                    type: 'danger',
                                    position:'top',
                                    timeout:2
                                });
                            }
                        })
                    }
                })
            }
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow-x:hidden;
            overflow-y: hidden;
        }

        .my-container {
            height: 100%;
            background-image: url("img/8.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        /* 中间登录界面 */
        .box {
            width: 500px;
            height: 310px;
            background-color: rgba(204,204,204,.5);
            margin: 100px auto;
            border-radius: 10px;
            position: relative;
            bottom: 650px;
            z-index: 3;
        }

        /* logo盒子 */
        .logo {
            width: 100%;
            height: 80px;
            padding: 10px 5px 10px;
        }

        /* 登录logo */
        .logo img {
            height: 100%;
        }

        /* 表单大小设置 */
        .form {
            width: 100%;
            height: 200px;
        }

        /* 账户，密码，验证码前面的图标 */
        i {
            font-size: 16px;
            color: rgb(153, 12, 12);
        }

        input {
            width: 200px;
        }

        span {
            height: 100%;
        }

        /* 登录按钮 */
        .anniu {
            width: 100%;
            margin-bottom: 10px;
            background-color: rgb(153, 12, 12);
            position: relative;
            /*top: 10px;*/
        }

        /* 记住密码 */
        .key {
            position: relative;
            bottom: 11px;
        }

        .vcode-box {
            position: relative;
        }

        .vcode-box img {
            width: 80px;
            height: 40px;
            position: absolute;
            /*top: 2px;*/
            right: 45px;
            bottom: 3px;
            border: 1px solid #eee;
            z-index: 999;
            cursor: pointer;
        }
        .myeyes img{
            height: 30px;
            float: left;
            position: relative;
            left: 420px;
            top: 70px;
            z-index: 999;
        }
        #myiframe{
            position: relative;
            left: -20px;
            height: 100%;
            width: 110%;
            z-index: 0;
        }
        #vcode{
            width: 280px;
        }
        #myimg{
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="container-fluid my-container">
    <iframe src="蛋.html" id="myiframe"></iframe>
    <div class="box">
        <!-- logo -->
        <div class="logo">
            <img src="img/6.png" alt="">
        </div>
        <div class="myeyes"><img src="img/closeeyes.png" id="imgli" onclick="aa()"></div>
        <div class="form">
            <form class="form-horizontal" id="myForm" action="/welcome/user/login">
                <div class="form-group">
                    <div class="col-md-offset-1 col-md-10 input-group input-group-lg">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" name="username" class="form-control " id="username" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-1 col-md-10 input-group input-group-lg">
                        <span class="input-group-addon lican"><i class="glyphicon glyphicon-lock"></i></span>
                        <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-1 col-md-7 input-group input-group-lg">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                        <input type="text" name="vcode" class="form-control" id="vcode" placeholder="请输入验证码">
                    </div>
                    <div class="vcode-box"><span><img class="Img" id="myimg" alt="加载失败"></span></div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-1 col-md-10">
                        <button type="button" class="btn btn-primary anniu" id="login-btn">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    function aa(){
        //1、获取元素
        var ipt = document.getElementById('password');
        var img = document.getElementById('imgli');
        if (ipt.type === 'password') {
            ipt.type = 'text';
            img.src = 'img/openeyes.png';
        } else {
            ipt.type = 'password';
            img.src = 'img/closeeyes.png';
        }
    }
</script>
</body>
</html>